Home:ALL Converter>Dynamically setting value of `grid-template-columns` css property

Dynamically setting value of `grid-template-columns` css property

Ask Time:2017-03-26T05:21:11         Author:ilyamilosevic

Json Formatter

Let's begin with an example: https://jsfiddle.net/ilyamilosevic/7nxv8cof/. So, in the example we are setting value of grid-template-columns to repeat(${n}, 1fr) where n is the number of columns. After opening devTools in Chrome (or in Firefox, doesn't matter) we see that the value of previously mentioned property is actually the long alternative (grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr) to laconic repeat(10, 1fr) if n = 10. You can call it a nit picking but I am interested why is it happening.

Additional info:

  • Windows;
  • Chrome 57.0.2987.110 32-bit;
  • Firefox 52.0.1 32-bit.

Author:ilyamilosevic,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/43022102/dynamically-setting-value-of-grid-template-columns-css-property
yy